<template>
  <van-cell class="event-item"  
  :to="
  
  {
    name:'club',
    params:{
        clubId:club.id
    }
  }
  "
  >
    <template #right-icon>
<van-image 
width="100"
height="100"
position="left"
:src="`${url}`+club.logo"
@click="viewImage"
>
</van-image>

</template>
    <template #title>
     
     <span  class="title van-multi-ellipsis--l2" >{{ club.name }}</span>
 </template>
 <template #label >
  <div class="description-wrap">

    <span class="van-multi-ellipsis--l2">{{ club.description.replace(/<[^>]+>/g, '') }}</span>
  </div>
    <span class="label-info">
      所属部门：<van-tag round  color="#7232dd">{{ club.department.name }} </van-tag>
      目前成员：<van-tag >{{ club.count }}</van-tag>人 <br>
      <van-tag v-if="club.isApply==1" type="success">社团招新中...</van-tag>
      <van-tag v-if="club.isApply==0" type="warning">未在招新</van-tag>
    </span>

</template>

  </van-cell>
</template>

<script>
import { ImagePreview } from 'vant';
import dayjs from "../../utils/day.js";

export default {
  props: {
    club: {
      type: Object,
      required: true
    } 
  },
  mounted() {
    // 从 sessionStorage 中获取之前记录的滑块位置
    const scrollY = sessionStorage.getItem('scrollYClub');
    // 如果存在记录，则滚动到该位置
    if (scrollY) {
      window.scrollTo(0, parseInt(scrollY));
    }
  },
  setup() {
    const url = import.meta.env.VITE_APP_URL + "/common/download?name=";

    return {
      url,
      dayjs,
    };
  }
};
</script>
<style>
.event-item .title {
  font-size: 18px;
  color: #3a3a3a;
}
.event-item .van-cell__value {
  flex: unset;
  width: 232px;
  height: 146px;
  padding-left: 25px;
}
.event-item .right-cover {
  width: 132px;
  height: 146px;
}

.event-item .label-info-wrap span {
  font-size: 14px;
  color: #b4b4b4;
  margin-right: 25px;
}
.event-item .cover-wrap {
  display: flex;
}
.event-item .cover-wrap .cover-item {
  /* 平分宽度 */
  flex: 1;
  padding-right: 4px;
}
.event-item .van-cell__value {
  width: 200px;
}

.event-item .label-info-wrap span {
  font-size: 14px;
  color: #b4b4b4;
  margin-right: 25px;
  word-break: break-all;
}
.description-wrap {
  display: flex;
  align-items: center;
}
.description-wrap .van-multi-ellipsis--l2 {
  flex: 1;
  word-break: break-all;
}
.description-wrap .label-info {
  font-size: 14px;
  color: #b4b4b4;
  margin-left: 25px;
}
</style>
